<template>
	<div class="orderData">
		<div class="orderData_title flex">
			<div @click="orderClick(key)" class="orderData_titleDiv flex1" :class="orderI==key?'orderData_titleActive':''" v-for="(data,key) in order_Active.order_title1">
				{{data.name}}
			</div>
		</div>
		<div class="orderData_body">
			<div class="orderData_body_top clear2">
				<div class="orderData_body_topDiv" v-for="(data,key) in order_Active.order_title2">
					{{data.name}}
				</div>
			</div>
			<div class="orderData_body_text" v-if="order_data.length!=0">
				<div class="clear2 orderData_body_textDiv" v-for="(data,key) in order_data">
					<div class="orderData_body_textDiv1">
						{{data.price}}
					</div>
					<div class="orderData_body_textDiv1">
						{{data.create_time}}
					</div>
					<div class="orderData_body_textDiv1">
						{{data.source}}
					</div>
				</div>
				
			</div>
			<div v-else style="font-size: 1.5rem;line-height: 5rem;text-align: center;">
				暂无数据
			</div>
			<div class="trapezoid" v-if="Math.ceil(count/20)>Num" @click="NextNum">
				<span  class="trapezoid_s1"></span>
				查看更多<i class="el-icon-arrow-down"></i>
				<span class="trapezoid_s2"></span>
			</div>
		</div>
	</div>
</template>

<script>
	
	export default {
		data: function() {
			return {
				order_type:0,
				orderI:0,
				order_Active:{
					order_title1:[{
						'name':'分润收益'
					},{
						'name':'店铺收益'
					},{
						'name':'购物退款'
					}],
					order_title2:[{
						'name':'金额'
					},{
						'name':'时间'
					},{
						'name':'来源'
					}],
				},
				order_title:[{
					'type':'0',
					'sub':{
						order_title1:[{
							'name':'分润收益'
						},{
							'name':'店铺收益'
						},{
							'name':'购物退款'
						}],
						order_title2:[{
							'name':'金额'
						},{
							'name':'时间'
						},{
							'name':'来源'
						}],
					}
				},{
					'type':'1',
					'sub':{
						order_title1:[{
							'name':'提现明细'
						},{
							'name':'消费明细'
						}],
						order_title2:[{
							'name':'金额'
						},{
							'name':'时间'
						},{
							'name':'去向'
						}],
					}
				},{
					'type':'3',
					'sub':{
						order_title1:[{
							'name':'支出明细'
						},{
							'name':'收入明细'
						}],
						order_title2:[{
							'name':'金额'
						},{
							'name':'时间'
						},{
							'name':'来源'
						}],
					}
				},{
					'type':'4',
					'sub':{
						order_title1:[{
							'name':'支出明细'
						},{
							'name':'收入明细'
						}],
						order_title2:[{
							'name':'金额'
						},{
							'name':'时间'
						},{
							'name':'来源'
						}],
					}
				}],
				Num:1,
				order_data:[],
				count:0,
			}
		},
		mounted() {
			this.order_type=this.$route.query.type;
			this.dataList(this.order_type)
			for(let i in this.order_title){
				if(this.order_title[i].type==this.order_type){
					this.order_Active=this.order_title[i].sub
				}
			}
		},
		methods: {
			NextNum(){
				this.Num++;
				this.dataList2(this.order_type);
				
			},
			orderClick(type){
				this.orderI=parseInt(type);
				this.Num=1;
				this.dataList(this.order_type);
			},
			dataList(type){
				let html_url='';
				let model={};
				switch(parseInt(type)){
					case 0:
						html_url=this.defines.get_member_incomes;
						model={
							'member_id':window.uid,
							'type':this.orderI+1,
							'page':this.Num,
							'per_page':20
						};
						break;
					case 1:
						html_url=this.defines.get_member_outcomes;
						model={
							'member_id':window.uid,
							'type':this.orderI+1,
							'page':this.Num,
							'per_page':20
						};
						break;
					case 3:
						html_url=this.defines.get_integral_bill;
						model={
							'member_id':window.uid,
							'bill_type':1,
							'detail_type':this.orderI+1,
							'page':this.Num,
							'per_page':20
						};
						break;
					case 4:
						html_url=this.defines.get_integral_bill;
						model={
							'member_id':window.uid,
							'bill_type':2,
							'detail_type':this.orderI+1,
							'page':this.Num,
							'per_page':20
						};
						break;
						
						
				}
				
				this.ajax(this, {
					'url': html_url,
					'type': 'post',
					'data':model,
					'callback': data => {
						if(data.data.error_code==0) {
							if(this.Num!=1){
								this.order_data=this.order_data.concat(data.data.data);
							}
							else{
								this.order_data=data.data.data;
							}
							this.count=parseInt(data.data.count);
							
						} else {
							Toast(data.data.error_msg)
						}

					},
					'errorback': errory => {

					},

				})
			},
		}
	}
</script>

<style scoped>
	
	.orderData{
		width: 100%;
	}
	.orderData_title{
		height: 3rem;
		line-height: 3rem;
		width: 100%;
		margin-bottom: 0.1rem;
		background: #1a1a1a;
	}
	.orderData_titleDiv{
		text-align: center;
		font-size: 1.4rem;
		line-height: 3rem;
		border-right: 1px solid #666666;
		color: #fff;
		box-sizing: border-box;
	}
	.orderData_titleDiv:nth-last-child(1){
		border: 0;
	}
	.orderData_titleActive{
		color: #ecb43d;
	}
	.orderData_body{
		width: 100%;
	}
	.orderData_body_top{
		height: 3rem;
		line-height: 3rem;
		width: 100%;
		background: #1a1a1a;
	}
	.orderData_body_topDiv{
		text-align: center;
		font-size: 1.4rem;
		line-height: 3rem;
		border-right: 1px solid #666666;
		color: #fff;
		float: left;
		width: 27%;
		box-sizing: border-box;
	}
	.orderData_body_topDiv:nth-last-child(1){
		width: 46%;
		border:0		
	}
	.orderData_body_text{
		width: 100%;
	}
	.orderData_body_textDiv{
		width: 100%;
		height: 3rem;
		border-bottom: 0.1rem solid #e6e6e6;
		overflow: hidden;
	}
	
	.orderData_body_textDiv1{
		text-align: center;
		font-size: 1.4rem;
		line-height: 4rem;
		color: #000;
		float: left;
		width: 27%;
		box-sizing: border-box;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}
	.orderData_body_textDiv1:nth-last-child(1){
		width: 46%;
		border:0		
	}
	.trapezoid {  
		height: 3rem;
		line-height: 3rem;
		text-align: center;
	    width:100%;  
	    background: #666666;
	    color: #fff;
	    font-size: 1.4rem;
	}
	.trapezoid i{
		padding: 0 5px;
	}
	.trapezoid_s1{
		float: left;
		display: inline-block;
		width: 0;
	    height: 0;
	    border-bottom: 3rem solid #fff;
	    border-right: 3rem solid transparent;
	}
	.trapezoid_s2{
		float: right;
		display: inline-block;
		width: 0;
	    height: 0;
	    border-bottom: 3rem solid #fff;
	    border-left: 3rem solid transparent;
	}
</style>